<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>User Information Form</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/dist/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/public.css" media="all">
    <style>
        /* Your CSS styles here */
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>用户信息展示</legend>
        </fieldset>

        <form class="layui-form" action="" lay-filter="userForm">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="男" title="男" checked="">
                    <input type="radio" name="sex" value="女" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" placeholder="请输入地址" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" lay-verify="required|phone" placeholder="请输入电话" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline">
                    <input type="text" name="birthdate" id="birthdate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <!-- Remove submit button since this is just for displaying -->
                </div>
            </div>
        </form>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="editUserBtn">编辑用户信息</button>
            <button class="layui-btn" lay-submit="" lay-filter="submitUserForm" id="submitUserBtn" disabled>提交</button>
        </div>
    </div>
</div>

<script src="../static/dist/layui.js" charset="utf-8"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form
            , laydate = layui.laydate;

        laydate.render({
            elem: '#birthdate'
        });

        $.ajax({
            url: "http://127.0.0.1:5000/api/user",
            type: "GET",
            success: function(response) {
                form.val('userForm', response);

                // Disable form elements initially
                $('input[name="name"], input[name="sex"], input[name="address"], input[name="email"], input[name="phone"], input[name="birthdate"]').attr('disabled', true);

                // Enable submit button when user data is loaded
                $('#submitUserBtn').removeAttr('disabled');
            },
            error: function(error) {
                alert("Error fetching user data.");
            }
        });

        $("#editUserBtn").click(function() {
            $('input[name="name"], input[name="sex"], input[name="address"], input[name="email"], input[name="phone"], input[name="birthdate"]').attr('disabled', false);
        });
        form.on('submit(submitUserForm)', function (data) {
             var formData = {
                name: $("input[name='name']").val(),
                sex: $("input[name='sex']:checked").val(),
                address: $("input[name='address']").val(),
                email: $("input[name='email']").val(),
                phone: $("input[name='phone']").val(),
                birthdate: $("input[name='birthdate']").val()
            };
            console.log(formData);
            $.ajax({
                url: "http://127.0.0.1:5000/update/userinfo",
                type: "POST",
                data: formData,
                success: function(response) {
                    alert("更新成功！");
                },
                error: function(error) {
                    alert("在提交的时候出现了错误！");
                }
            });
            return false;
        });

    });
</script>
</body>
</html>
